<template>
  <div class="app-car-container" v-loading="loading">
    <CustomContent>
      <template v-slot:body>
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-row :gutter="15">
            <el-col :span="24">
              <MmvTitle title="车辆信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="车辆信息" prop="carInfo">
                <div  @click="showxcheliang = true">
                  <el-input
                    :value="form.carInfo"
                    readonly
                    style="width: 100%"
                    placeholder="请选择车辆"
                  >
                    <el-button
                      icon="el-icon-search"
                      slot="append"
                    ></el-button>
                </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="车牌号" prop="carNo">
                <el-input
                  v-model="form.carNo"
                  readonly
                  style="width: 100%"
                  placeholder="请选择车辆"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="车架号" prop="vinNo">
                <el-input
                  v-model="form.vinNo"
                  readonly
                  style="width: 100%"
                  placeholder="请选择车辆"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <MmvTitle title="违章信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="违章单据号" prop="documentNo">
                <el-input
                  v-model="form.documentNo"
                  style="width: 100%"
                  placeholder="请输入违章单据号"
                />
              </el-form-item>
            </el-col>

            <el-col
              :sm="24"
              :md="12"
              :lg="8"
              style="height: 58px; overflow: hidden"
            >
              <el-form-item label="违章时间" prop="illegalTime">
                <el-date-picker
                  clearable
                  size="small"
                  v-model="form.illegalTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                  placeholder="选择违章时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="违章地点" prop="illegalLocation">
                <el-input
                  v-model="form.illegalLocation"
                  style="width: 100%"
                  placeholder="请输入违章地点"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="违章扣分" prop="pointsDeduction">
                <el-input
                  v-model="form.pointsDeduction"
                  style="width: 100%"
                  placeholder="请输入扣分"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="罚款金额" prop="illegalFines">
                <el-input
                  v-model="form.illegalFines"
                  style="width: 100%"
                  placeholder="请输入罚款金额"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="违章内容" prop="illegalDetail">
                <el-input
                  v-model="form.illegalDetail"
                  type="textarea"
                  style="width: 100%"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <MmvTitle title="违章处理"></MmvTitle>
            </el-col>

            <el-col :span="24">
              <el-form-item label="处理信息" prop="payPersonType">
                <!-- 1个人缴费,2平台缴费 -->
                <el-radio-group v-model="form.payPersonType">
                  <el-radio :label="1">客户处理</el-radio>
                  <el-radio :label="2">公司处理</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理状态" prop="processingStatus">
                <el-radio-group v-model="form.processingStatus">
                  <el-radio :label="1">未处理</el-radio>
                  <el-radio :label="2">已处理未缴费</el-radio>
                  <el-radio :label="3">已处理</el-radio>
                  <el-radio :label="4">已缴费未处理</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="违章手续费" prop="illegalPoundage">
                <el-input
                  v-model="form.illegalPoundage"
                  style="width: 100%"
                  placeholder="请输入违章手续费"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="缴费总金额" prop="totalMoney">
                <el-input
                  v-model="form.totalMoney"
                  readonly
                  style="width: 100%"
                  placeholder="缴费总金额"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理附件" prop="imgList">
                <imageUpload
                  isArray
                  v-model="form.imgList"
                  ref="imageUpload"
                  v-bind:limit="6"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 选择车辆 -->
        <MmvSelectCar
          v-model="showxcheliang"
          @success="submitcheliang"
        ></MmvSelectCar>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" @click.native="submitForm">保存</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import {
  listIllegal,
  getIllegal,
  delIllegal,
  addIllegal,
  updateIllegal,
  exportIllegal,
} from '@/api/car/illegal'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvSelectCar from '@/views/components/selectCar.vue'
import CustomContent from '@/components/custom/content.vue'

export default {
  name:"illegal_add",
  components: {
    MmvTitle,
    MmvSelectCar,
    CustomContent,
  },
  dicts: ['illegal_type'],
  data() {
    return {
      id: null,
      showxcheliang: false,
      loading: false,
      form: {
        carId: '',
        carNo: '',
        vinNo: '',
        carInfo: '',
        documentNo: '',
        illegalTime: '',
        illegalLocation: '',
        illegalType: '',
        illegalDetail: '',
        pointsDeduction: '',
        illegalFines: '',
        processingStatus: 1,
        processingAgency: '',
        illegalPoundage: '',
        totalMoney: '',
        payPersonType: 1,
        repayment: 1,
        handlers: '',
        imgList: [],
      },
      rules: {
        carId: [{ required: true, message: '必填' }],
        carNo: [{ required: true, message: '必填' }],
        carInfo: [{ required: true, message: '必填' }],
        documentNo: [{ required: true, message: '请输入违章单据号' }],
        illegalTime: [{ required: true, message: '选择违章时间必填' }],
        illegalLocation: [{ required: true, message: '请输入违章地点' }],
        illegalDetail: [{ required: true, message: '请输入内容' }],
        pointsDeduction: [
          { required: true, message: '请输入扣分' },
          {
            pattern: /^(([0-9]|[1-9][0-9]*))$/,
            message: '费用输入有误',
            trigger: 'blur',
          },
        ],
        illegalFines: [
          { required: true, message: '请输入罚款金额' },
          {
            pattern: /^([0-9]|([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
            message: '费用输入有误',
            trigger: 'blur',
          },
        ],
        illegalPoundage: [
          { required: true, message: '请输入违章手续费' },
          {
            pattern: /^([0-9]|([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
            message: '费用输入有误',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    totalMoney() {
      return (Number(this.form.illegalFines) + Number(this.form.illegalPoundage)).toFixed(2)
    },
  },
  watch: {
    totalMoney(val) {
      this.form.totalMoney = val
    },
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getData()
    }
  },
  methods: {
    validate() {
      return new Promise((resolve) => {
        this.$refs['form'].validate((valid) => {
          resolve(valid)
        })
      })
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    async submitForm() {
      /** 提交按钮 */
      try {
        const valid = await this.validate()
        if (valid) {
          const form = this.emitData()
          if(form.imgList==''){
            form.imgList=[]
          }
          if (form.id != null) {
            if(form.processingStatus==3&&form.billFinancial&&form.billFinancial.settlementStatus==3&&form.billFinancial.payableAmount>form.totalMoney){
              this.$confirm("账单已收："+form.billFinancial.payableAmount +"元，超过违章金额："+form.totalMoney+"元,确认修改后不会修改账单，是否进行修改", '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '保存',
                cancelButtonText: '放弃修改'
              })
                .then(() => {
                  updateIllegal(form).then((response) => {
                    this.$modal.msgSuccess('修改成功')
                    this.close()
                  })
                })
                .catch(action => {
                  this.$message({
                    type: 'info',
                    message: '放弃修改并离开页面'
                  })
                });
            }else{
              updateIllegal(form).then((response) => {
                this.$modal.msgSuccess('修改成功')
                this.close()
              })
            }
          } else {
            addIllegal(form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.close()
            })
          }
        }
      } catch (error) {}
    },
    emitData() {
      return this.form
    },
    getData() {
      this.loading = true
      getIllegal(this.id).then((response) => {
        this.form = response.data
        this.loading = false
      })
    },
    submitcheliang(data) {
      this.showxcheliang = false
      this.form.carId = data.carId
      this.form.carNo = data.carNo
      this.form.vinNo = data.vinNo
      this.form.carInfo = data.carInfo
    },
  },
}
</script>
